import React  from 'react';
import { Button, Col, Form, Input, Row } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import "./addDept.css"

class AddDept extends React.Component{
  constructor(props) {
    super(props);
  }
  onFinish=(values)=>{
    console.log(values);
    values.parentId=0;
    const url = "http://1.94.134.166:8805/dept";
    const config={
      method:'POST',
      headers:{
        'Content-Type':'application/json',
        Authorization:localStorage.getItem('Authorization'),
      },
      body: JSON.stringify(values),
    };
    fetch(url,config)
      .then((response)=>response.json())
      .then((res)=>{
        this.props.refreshList();
        this.props.closeDrawer();
      });
  }
  render() {
    return(
      <>
        <div className="add_inputarea">
          <Form
            name="basic"
            labelCol={{
              span: 3,
            }}
            wrapperCol={{
              span: 21,
            }}
            initialValues={{
              username: 'admin', // 默认用户名
              password: '123456', // 默认密码
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="deptName"
              label="部门名称"
              rules={[
                {
                  required: true,
                  message: '请输入部门名称!',
                },
                {
                  pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/,
                  message: '部门名称只能包含中文、字母和数字!',
                },
                {
                  min: 2,
                  max: 20,
                  message: '部门名称长度应为2到20个字符!',
                },
              ]}
            >
              <Input size="large" />
            </Form.Item>

            <Form.Item
              name="deptPy"
              label="部门拼音"
              rules={[
                {
                  required: true,
                  message: '请输入部门拼音!',
                },
                {
                  pattern: /^[a-zA-Z]+$/,
                  message: '部门拼音只能包含字母!',
                },
                {
                  min: 3,
                  max: 40,
                  message: '部门拼音长度应为3到40个字符!',
                },
              ]}
            >
              <Input size="large" />
            </Form.Item>

            <Form.Item
              name="phone"
              label="联系方式"
              rules={[
                {
                  required: true,
                  message: '请输入联系方式!',
                },
                {
                  pattern: /^1(3[0-9]|4[5-9]|5[0-3,5-9]|6[2,5-9]|7[0-8]|8[0-9]|9[1,3-9])\d{8}$/,
                  message: '请输入有效的手机号!',
                },

              ]}

            >
              <Input size="large" />
            </Form.Item>

            <Form.Item
              wrapperCol={{ span: 24 }}
            >
              <div className="div_addSubmit">
                <Button type="primary" htmlType="submit" className="addSubmit">
                  提交
                </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </>
    )
  }

}

export default AddDept;
